<template>
    <PageLayout>
        <template v-slot:header>
            <el-input v-model="query.name" placeholder="输入经营名称查询" size='small'/>
            <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            <el-button type='primary' plain size='small' @click="addEvt" >新增</el-button>
        </template>

        <el-table :data="tableData"
            :row-style="{height:'32px'}"
            style="width: 100%"
            height="100%"
            size='small'>
            <el-table-column prop="name" label="经营名称" width="180" fixed/>
            <el-table-column prop="product_name" label="产品名称" width="180"/>
            <el-table-column prop="price" label="运营价格" width="120"/>
            <el-table-column prop="count" label="投放数量" width="120"/>
            <el-table-column :show-overflow-tooltip="true" prop="sale_stime" label="上架时间" width="150"/>
            <el-table-column :show-overflow-tooltip="true" prop="sale_etime" label="下架时间"/>
            <el-table-column :show-overflow-tooltip="true" prop="address" label="运营范围" width="150"/>
            <el-table-column align="center" label="操作" width="180" fixed="right">
                <template v-slot="it">
                    <el-button type="text" size="normal" @click="editEvt(it.row)">编辑</el-button>
                    <el-button type="text" size="normal" @click="detailEvt(it.row)" >详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <template v-slot:footer>
            <el-pagination :page-sizes="[2, 4, 6, 8]"
                :page-size="query.size"
                :current-page="query.page"
                @size-change="sizeChange"
                @current-change="currentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"/>
        </template>
    </PageLayout>
</template>
<script>
import { rangeListApi } from '@/apis/productApi'
export default {
    data() {
        return {
            tableData:[],
            query:{
                page:1,
                size:20,
                name:''
            },
            total:0
        }
    },
    methods:{
        addEvt(){
            this.$router.push('/product/range/edit')
        },
        editEvt(item){
            localStorage.setItem('rangeFlagTwo','false')
            this.$store.commit('common/setRangeList', item)
            this.$router.push('/product/range/edit')
        },
        detailEvt(it){
            // console.log(it)
            localStorage.setItem('rangeFlag','true')
            this.$store.commit('common/setRangeList', it)
            this.$router.push('/product/range/detail')
        },
        sizeChange(size){
            this.query.size=size
            this.getRangeList()
        },
        currentChange(page){
            this.query.page=page
            this.getRangeList()
        },
        queryEvt(){
            this.query.page=1
            this.getRangeList()
        },
       async getRangeList(){
        rangeListApi(this.query).then(d=>{
            if(d.code===200){
                this.tableData = d.data.rows
                this.total = d.data.count
                this.tableData.map((it,_)=>{
                    it.sale_stime=it.sale_stime.split('T')[0]
                    it.sale_etime=it.sale_etime.split('T')[0]
                })
            }
        }).catch(e=>{
                console.log(e)
         })
        }
    },
    mounted(){
        this.getRangeList()
    }
}
</script>
<style lang="less" scoped>
.el-table{
    font-size: .7rem;
}
//  .el-table .el-table__cell{
//     text-align: center !important;
// }
    .el-button,
    .el-button--text,
    .el-button--normal{
        margin-left: 10px;
    }
</style>